<script>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

export default {
  name: 'HobbySetting',
  setup() {
    // 语言设置
    // 使用 useI18n 获取 locale
    const { locale } = useI18n();

    // 从 localStorage 中获取用户选择的语言，如果没有则使用默认语言
    const selectedLanguage = ref(localStorage.getItem('language') || 'zh-cn');

    // 组件挂载时，设置当前语言
    onMounted(() => {
      locale.value = selectedLanguage.value;
    });

    // 保存语言设置
    const saveLanguage = () => {
      localStorage.setItem('language', selectedLanguage.value); // 保存到 localStorage
      locale.value = selectedLanguage.value; // 更新 vue-i18n 的 locale
    };


    // 主题设置
    const theme = ref('light');

    // 通知设置
    const notifications = ref({
      email: true,
      sms: false,
      push: true,
    });

    // 隐私设置
    const privacy = ref({
      showProfile: true,
      showActivity: false,
    });

    // 保存偏好设置
    const savePreferences = () => {
      console.log('偏好设置已保存', {
        language: selectedLanguage.value,
        theme: theme.value,
        notifications: notifications.value,
        privacy: privacy.value,
      });
      alert('偏好设置已保存！');
      saveLanguage(); // 在保存偏好设置时也保存语言
    };

    return {
      selectedLanguage,
      saveLanguage,
      theme,
      notifications,
      privacy,
      savePreferences
    };
  },
};
</script>

<template>
  <div class="preference-setting">
    <div class="settings-container">
      <!-- 语言设置 -->
      <section class="setting-section">
        <h2>{{ $t('Setting.Preference.languageSetting') }}</h2>
        <div class="setting-options">
          <label>
            <input
              type="radio"
              v-model="selectedLanguage"
              value="zh-cn"
            />
            {{ $t('Setting.Preference.languageOptions.zh-cn') }}
          </label>
          <label>
            <input
              type="radio"
              v-model="selectedLanguage"
              value="en-us"
            />
            {{ $t('Setting.Preference.languageOptions.en-us') }}
          </label>
        </div>
      </section>

      <!-- 主题设置 -->
      <section class="setting-section">
        <h2>{{ $t('Setting.Preference.themeSetting') }}</h2>
        <div class="setting-options">
          <label>
            <input
              type="radio"
              v-model="theme"
              value="light"
            />
            {{ $t('Setting.Preference.themeOptions.light') }}
          </label>
          <label>
            <input
              type="radio"
              v-model="theme"
              value="dark"
            />
            {{ $t('Setting.Preference.themeOptions.dark') }}
          </label>
        </div>
      </section>

      <!-- 通知设置 -->
      <section class="setting-section">
        <h2>{{ $t('Setting.Preference.notificationSetting') }}</h2>
        <div class="setting-options">
          <label>
            <input
              type="checkbox"
              v-model="notifications.email"
            />
            {{ $t('Setting.Preference.notificationOptions.email') }}
          </label>
          <label>
            <input
              type="checkbox"
              v-model="notifications.sms"
            />
            {{ $t('Setting.Preference.notificationOptions.sms') }}
          </label>
          <label>
            <input
              type="checkbox"
              v-model="notifications.push"
            />
            {{ $t('Setting.Preference.notificationOptions.push') }}
          </label>
        </div>
      </section>

      <!-- 隐私设置 -->
      <section class="setting-section">
        <h2>{{ $t('Setting.Preference.privacySetting') }}</h2>
        <div class="setting-options">
          <label>
            <input
              type="checkbox"
              v-model="privacy.showProfile"
            />
            {{ $t('Setting.Preference.privacyOptions.showProfile') }}
          </label>
          <label>
            <input
              type="checkbox"
              v-model="privacy.showActivity"
            />
            {{ $t('Setting.Preference.privacyOptions.showActivity') }}
          </label>
        </div>
      </section>
    </div>
    <!-- 保存按钮 -->
    <div class="actions">
      <button @click="savePreferences">{{ $t('Setting.Preference.saveSettings') }}</button>
    </div>
  </div>
</template>

<style scoped>
@import "/src/css/base.css";
@import "/src/css/setting/hobby-setting.css";
</style>
